<template>
	<view>
		<!-- 空白购物车区域 -->
		<view class="empty-cart" v-if="cart.length === 0">
			<image src="../../static/logo.png" class="empty-image"></image>
			<text class="empty-text">空空如也~~~</text>
		</view>
		<view v-else>
			<view class="cart-container" >
				<my-adress></my-adress>
				<view class="title-view">
					<uni-icons type="shop" size="18" color="gray"></uni-icons>
					<view class="title">购物车</view>
				</view>
			<uni-swipe-action>
				<block v-for="(item,index) in cart" :key="index">
					<uni-swipe-action-item :right-options="options" @click="deleteAction(item)">
						<my-goods :item="item" :showRadio="true" :showNum="true" @radioChange="radioHandler" @numChange="numChange"></my-goods>
					</uni-swipe-action-item>
				</block>
			</uni-swipe-action>
				<!-- view class="cart-list">
					<view class="cart-item" v-for="(item,index) in cart"  :key="index">				
						<view class="left-view">
							<uni-icons type="circle" size="20"></uni-icons>
							<image :src="item.goods_small_logo" class="goods-image"></image>
						</view>
						<view class="right-view">
							<view class="top-view">
								<view class="goods-name">{{item.goods_name}}</view>
							</view>
							<view class="bottom-view">
								<view class="goods-price">￥{{item.goods_price}}</view>
								<uni-number-box></uni-number-box>
							</view>
						</view>
					</view>
				</view> -->
				<!-- 自定义的结算组件 -->
				<my-settle></my-settle>
			</view>
		</view>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	import {mapState,mapMutations} from 'vuex'
	
	export default {
		mixins: [badgeMix],
		computed:{
			 ...mapState('m_cart',['cart'])
		},
		data() {
			return {
				options:[
					{
						text: '删除',
						style:{
							backgroundColor: '#C00000'
						}
					},
				]
			}
		},
		methods: {
			...mapMutations('m_cart',['updateGoodState','updateGoodCount','removeGoodsById']),
			radioHandler(e){
				this.updateGoodState(e)
			},
			numChange(e){
				this.updateGoodCount(e)
			},
			deleteAction(goods){
				console.log(goods)
				this.removeGoodsById(goods)
			}
		}
	}
</script>

<style lang="scss">
	.empty-cart{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 200px;
		.empty-image{
			width: 90px;
			height: 90px;
		}
		.empty-text{
			margin-top: 15px;
			color: gray;
			font-size: 15px;
		}
	}
	.cart-container{
		padding-bottom: 50px;
	}
	.title-view{
		display: flex;
		padding: 10px;
		height: 30px;
		align-items: center;
		border-bottom: 1px solid #efefef;
		.title{
			margin-left: 5px;
			font-size: 15px;
			color: gray;
		}
	}
	.cart-list{
		.cart-item{
			display: flex;
			border-bottom: 1px solid #efefef;
			padding: 10px;
			.left-view{
				display: flex;
				align-items: center;
				.goods-image{
					margin-left: 10px;
					width: 100px;
					height: 100px;
				}
			}
			.right-view{
				margin-left: 10px;
				.top-view{
					font-size: 15px;
				}
				.bottom-view{
					margin-top: 10px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.goods-price{
						color: $theme_color;
					}
				}
			}
		}
	}
</style>
